<template>
    <el-input
        v-model="inputValue"
        v-bind="$attrs"
        @input="changeInput"
    />
</template>

<script setup lang="ts">
    import { ref, PropType, watch } from "vue";

    const props = defineProps({
        modelValue: {
            type: [String, Number] as PropType<string | number>,
            default: ''
        },
    })

    const emit = defineEmits(['update:modelValue', 'input', 'change']);
    let inputValue = ref<string | number>('');
    const changeInput = (str: string = '') => {
        inputValue.value = str.replace(/^\s+/, '');
        emit('update:modelValue', inputValue.value);
        emit('input', inputValue.value);
        emit('change', inputValue.value);
    }

    watch(() => props.modelValue, (newValue: string | number) => {
        inputValue.value = newValue;
    }, {
        immediate: true
    });
</script>

<style scoped lang="scss"></style>